<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
            <script type="text/javascript" src="lib/html5shiv.js"></script>
            <script type="text/javascript" src="lib/respond.min.js"></script>
            <![endif]-->
    <link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css" />

    <link rel="stylesheet" type="text/css" href="../static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" href="./../lib/layui/css/layui.css">
    <!--[if IE 6]>
            <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
            <script>DD_belatedPNG.fix('*');</script>
            <![endif]-->
    <style>
        .layui-upload .mark_button {
            position: absolute;
            right: 15px;
        }
 
        .upload-img {
            position: relative;
            display: inline-block;
            width: 200px;
            height: 150px;
            margin: 0 10px 10px 0;
            transition: box-shadow .25s;
            border-radius: 4px;
            box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.5);
            transition: 0.25s;
            -webkit-transition: 0.25s;
            margin-top: 15px;
        }
 
        .layui-upload-img {
            width: 200px;
            height: 150px;
            border-radius: 4px;
        }
 
        .upload-img:hover {
            cursor: pointer;
            box-shadow: 0 0 4px rgba(0,0,0,1);
            transform: scale(1.2);
            -webkit-transform: scale(1.05);
        }
 
        .upload-img input {
            position: absolute;
            left: 0px;
            top: 4px;
        }
 
        .upload-img button {
            position: absolute;
            right: 0px;
            top: 0px;
            border-radius: 6px;
        }
            </style>
    <title>添加商品</title>
</head>

<body>
    <div class="page-container">
        <form action="" method="post" class="form form-horizontal" id="form-article-add">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">所属分区：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="" class="input-text" id="usrecompStatus" style="width:100%;"></select>
                 
                </div>
            </div>
            <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">首页展示：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <select name="" class="input-text" id="top" style="width:100%;">
                            <option value="0">不显示</option>
                            <option value="1">显示</option>
                        </select>
                    </div>
                </div>
                <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-2">状态：</label>
                        <div class="formControls col-xs-8 col-sm-9">
                            <select name="" class="input-text" id="comStatus" style="width:100%;">
                                <option value="0">下架</option>
                                <option value="1">上架</option>
                            </select>
                        </div>
                    </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">类型：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="" class="input-text" id="comType"  onchange="typeChange()" style="width:100%;">
                        <option value="">-请选择-</option>
                        <option value="0">商品</option>
                        <option value="1">礼包</option>
                        <option value="2">礼品</option>
                        <option value="3">热销商品</option>
                        <option value="4">抢购商品</option>
                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">商品名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="title" name="">
                </div>
            </div>
            <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">排序：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" placeholder="" id="sort" name="">
                    </div>
                </div>
            <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">等级：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="number" style = "width:100%;" class="input-text" value="" placeholder="" id="lv" name="">
                    </div>
                </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">价格：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="price" name="">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">邮费：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="postage" name="">
                </div>
            </div>
            <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">历史库存：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" placeholder="" id="historyStock" name="">
                    </div>
                </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">库存：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="stock" name="">
                </div>
            </div>
            <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">礼包享受折扣：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" value="" placeholder="" id="giftBagAgio" name="">
                    </div>
                </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">商品描述：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="" placeholder="" id="describe" name="">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">缩略图：</label>
                <div class="layui-upload formControls col-xs-8 col-sm-9">
                    <button type="button" class="layui-btn" id="uploadPicture">上传图片</button>
                    <div class="layui-upload-list">
                        <div style="width:150px;height: 150px;">
                            <img src="" class="layui-upload-img" id="picture" style="width:auto;height:100%;">
                        </div>
                        <p id="demoText" style="margin-top:5px"></p>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">商品详情页轮播图：</label>
                <div class="layui-upload formControls col-xs-8 col-sm-9">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="selectPicture">选择文件</button>
                        <button type="button" class="layui-btn layui-btn-danger" id="dele_imgs">清空图片</button>
                        <blockquote class="" style="margin-top: 10px;">
                            <div class="layui-upload-list" id="demo2"></div>
                        </blockquote>
                    </div>
                </div>
            </div>
            <!-- 选项卡 -->
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">详细内容：</label>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"></label>
                <div class="layui-tab formControls col-xs-8 col-sm-9" lay-filter="test">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="11">详细信息</li>
                        <li lay-id="22">规格参数</li>
                        <li lay-id="33">购买须知</li>
                        <li lay-id="44" id="giftBagBox" style="display:none">礼包内容</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="formControls col-xs-12 col-sm-12">
                                <textarea id="demo" style="display: none;"></textarea>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-tab-item layui-show">
                                <div class="formControls col-xs-12 col-sm-12">
                                    <textarea id="parameter" style="display: none;"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-tab-item layui-show">
                                <div class="formControls col-xs-12 col-sm-12">
                                    <textarea id="notice" style="display: none;"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                                <div class="layui-tab-item layui-show">
                                    <div class="formControls col-xs-12 col-sm-12">
                                        <textarea id="giftPackage" style="display: none;"></textarea>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-4 col-sm-7 col-xs-offset-2" style="margin-bottom:20px;margin-top:10px">
                        <div onClick="save_submit();" class="btn btn-primary radius" id="manyUploadPicture">保存</div>
                        <button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
                    </div>
                </div>
        </form>

    </div>
    <input type="" name="select_vvv" id="select_vvv" value="" style="display:none;" />
    <script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="./../static/js/common.js"></script>
    <script type="text/javascript" src="../lib/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="../static/h-ui/js/H-ui.min.js"></script>
    <script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js"></script>
    <script type="text/javascript" src="./../lib/layui/layui.js"></script>
    <script id="img_template" type="text/html">
        <div class="upload-img" filename="{{ d.index }}">
            <img src="{{  d.result }}" alt="{{ d.name }}" class="layui-upload-img">
        </div>
    </script>
    <script>
        function typeChange(){
            if($("#comType option:selected").val() == 1){
                $("#giftBagBox").show();
            }else{
                $("#giftBagBox").hide();
            }
        }
        // 获取Id
        var parentId = parent.$("#details_id").val(),
            dImg = [],
            picture = '',
            img = '';
        $(function () {
                partitionStatus('usrecompStatus')
            $.ajax({
                type: 'post',
                xhrFields: { withCredentials: true },
                url: admin_url + '/kvmProduct/product',
                data: { tokenUserId: userId, token: token, id: parentId },
                success: function (data) {
                    //   获取值
                    if (data.code == 200) {
                        $("#usrecompStatus").val(data.data.category);
                        $("#title").val(data.data.name);
                        $("#price").val(data.data.price);
                        $("#postage").val(data.data.postFee);
                        $("#stock").val(data.data.currentStock);
                        $("#demo").val(data.data.detail);
                        $("#parameter").val(data.data.param);
                        $("#notice").val(data.data.buyNotice);
                        $("#describe").val(data.data.remark);
                        $("#giftPackage").val(data.data.items);
                        $("#comType").val(data.data.type);
                        $("#lv").val(data.data.lv);
                        $("#top").val(data.data.top);
                        $("#historyStock").val(data.data.stock);
                        $("#giftBagAgio").val(data.data.discount);
                        $("#sort").val(data.data.sort);
                        $("#comStatus").val(data.data.status);
                        if(data.data.type == 1){
                            $("#giftBagBox").show();
                        }else{
                            $("#giftBagBox").hide();
                        }
                        $("#picture").attr('src', data.data.icon);
                        
                        picture = data.data.icon;

                        if (data.data.img == null) {

                        } else {
                            var str = (data.data.img).replace("[", "").replace(new RegExp("\"", 'g'), "");
                            var pImg = (str.replace(']', '').replace(new RegExp("\"", 'g'), "")).split(',');
                            dImg = pImg;
                            for (var i = 0; i < pImg.length; i++) {
                                $("#demo2").append('<img src="' + pImg[i] + '"  class="layui-upload-img" style="margin:5px">')

                            }
                        }

                    }
                }
            })
        })
        layui.use(['upload', 'layedit', 'laytpl', 'element'], function () {
            var upload = layui.upload,
                laytpl = layui.laytpl,
                element = layui.element,
                layedit = layui.layedit;
            var imgFiles;
            var status = true;
            // 单个图片上传
            var uploadInst = upload.render({
                elem: '#uploadPicture',
                url: admin_url + '/uf/uploadFile',
                accept: 'images',
                before: function (obj) {

                    //预读本地文件，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#picture').attr('src', result); //图片链接（base64）
                    });
                },
                done: function (res) {
                    picture = res.data.src
                    if (res.code != 0) {
                        return layer.msg('上传失败');
                    }
                },
                error: function () {
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            })
            //批量删除 单击事件
            $('#dele_imgs').click(function () {
                $('input:checked').each(function (index, value) {
                    var filename = $(this).parent().attr("filename");
                    delete imgFiles[filename];
                    $(this).parent().remove()
                });
            });
            $("#dele_imgs").on("click", function () {
                // 清空图片，并且将dImg中的数据清空掉
                $("#demo2").html('');
                dImg = [];
            })
            //多图片上传
            upload.render({
                elem: '#selectPicture',
                url: admin_url + '/uf/uploadFile',
                accept: 'images',
                multiple: true,
                // auto: false,
                number: 5,
                // bindAction: '#manyUploadPicture',
                allDone: function (obj) {
                },
                choose: function (obj) {
                    var files = this.files = obj.pushFile();//将每次选择的文件追加到文件队列
                    imgFiles = files;
                    obj.preview(function (index, file, result) {
                        var data = {
                            index: index,
                            name: file.name,
                            result: result
                        };


                        laytpl(img_template.innerHTML).render(data, function (html) {
                            $('#demo2').append(html);
                        });
                    })
                }
                , before: function (obj) {

                }
                , done: function (res, index, upload) {
                    dImg.push(res.data.src);
                    return delete imgFiles[index];
                    //上传完毕
                }
                , error: function (index, upload) {
                    top.layer.msg("上传失败！");

                }
            });
            // 构建富文本
            //构建一个默认的编辑器
            var index = layedit.build('demo', {
                height: 500,
                uploadImage: { url: admin_url + '/uf/', type: 'post' },
                //   });
            });

            layedit.build('notice', {
                height: 500,
                uploadImage: { url: admin_url + '/uf/uploadFile', type: 'post' },
                //   });
            });
            layedit.build('parameter', {
                height: 500,
                uploadImage: { url: admin_url + '/uf/uploadFile', type: 'post' },
                //   });
            });
            layedit.build('giftPackage', {
                height: 500,
                uploadImage: {
                url:admin_url + '/uf/uploadFile', type: 'post'
                  }
            });
            // 选项卡
            var layid = location.hash.replace(/^#test=/, '');
            element.tabChange('test', layid);

            element.on('tab(test)', function (elem) {
                location.hash = 'test=' + $(this).attr('lay-id');
            });
        })
        // 保存
        function save_submit() {
            //    获取数据
            dmg = dImg.toString();
            var tit = $("#title").val(),
                price = $("#price").val(),
                describe = $("#describe").val(),
                postage = $("#postage").val(),
                stock = $("#stock").val(),
                status = $("#usrecompStatus option:selected").val(),
                comType = $("#comType option:selected").val(),
                lv =$("#lv").val(),
                top = $("#top option:selected").val(),
                comStatus = $("#comStatus option:selected").val(),
                sort = $("#sort").val(),
                giftBagAgio = $("#giftBagAgio").val(),
                historyStock = $("#historyStock").val();
            // 获取富文本数据
            var content = $(window.frames["LAY_layedit_1"].document).find('body').html();
            var parameter = $(window.frames["LAY_layedit_3"].document).find('body').html();
            var notice = $(window.frames["LAY_layedit_2"].document).find('body').html();
            var giftBag = $(window.frames["LAY_layedit_4"].document).find('body').html();
            $.ajax({
                type: 'post',
                xhrFields: { withCredentials: true },
                url: admin_url + '/kvmProduct/updProduct',
                data: { tokenUserId: userId, token: token,top:top,stock:historyStock,discount:giftBagAgio,sort:sort, status:comStatus, id: parentId, name: tit,type:comType, category: status, price: price, postFee: postage, remark: describe, currentStock: stock, detail: content, param: parameter, buyNotice: notice, images: dmg, icon: picture,items:giftBag,lv:lv },
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg('修改成功', {
                            time: 1000,
                            end: function () {
                           
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                // window.parent.location.reload();
                                $(window.parent.document).find('.layui-laypage-btn').click()
                            }
                        })
                    } else {
                        layer.msg(data.msg, {
                            time: 1500
                        })
                    }
                }
            })
        }
    </script>
</body>

</html>